<template>
  <div class="media-body">
    <!-- 上半部 -->
    <div class="goods-img">
      <img :src="imgprefix + imgbase" />
    </div>
    <!-- 下半部 -->
    <div class="goods-info">
      <div class="goods-name">{{ name }}</div>
      <div class="goods-price">
        <span style="font-size: 12px">￥</span>
        <span style="font-size: 18px">{{ price | splitPrice }}.</span>
        <span style="font-size: 13px">{{ price | splitPrice2 }}</span>
      </div>
      <div class="goods-comment">{{ tpl }}+条好评</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Media",
  props: ["imgbase", "name", "price", "tpl", "imgprefix"],
  filters: {
    splitPrice(val) {
      let nums = val.split(".");
      return nums[0];
    },
    splitPrice2(val) {
      let nums = val.split(".");
      return nums[1];
    },
  },
};
</script>

<style scoped>
.media-body {
  flex: 1 calc(50% - 12px);
  margin-bottom: 15px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 2px 8px rgb(0 0 0 / 20%);
  overflow: hidden;
}
.media-body:nth-child(odd) {
  margin-right: 12px;
}
.media-body /deep/ .goods-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
}

.goods-img /deep/ img {
  width: 100%;
}

.goods-info {
  padding: 5px;
}
.goods-info > * + * {
  margin-top: 3px;
}

.media-body /deep/ .goods-price {
  font-size: 18px;
  line-height: 1.5rem;
  color: #ff4142;
}
.media-body /deep/ .goods-comment {
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
}
</style>